<!DOCTYPE html>
<html>
<head>
	<title>取货助手 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/common.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/notice.js" type="text/javascript"></script>
	<script src="js/regexp.js" type="text/javascript"></script>
	<script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
	<script src="layer/layer.js"></script>
	<script type="text/javascript">
		//扫码取件
	$.ajax({
		url:"wxconf.do",
		type:"GET",
		data:"xurl="+location.href.split('#')[0],
		success:function(data){
				//data = JSON.parse(data);
			wx.config({
			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			    appId: data.appid, // 必填，公众号的唯一标识
			    timestamp: data.timestamp, // 必填，生成签名的时间戳
			    nonceStr: data.nonceStr, // 必填，生成签名的随机串
			    signature: data.signature,// 必填，签名
			    jsApiList: ['startRecord','stopRecord','scanQRCode','playVoice','uploadVoice','downloadVoice','onVoiceRecordEnd','translateVoice'
			    	,'downloadVoice', 'onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
			});
		},error:function(){
			
		}
	});
	
	wx.ready(function(){
	    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
	    $("#scanQRCodeBtn").click(x1);
	});
	wx.error(function(res){
	    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	    alert("扫描错误")
	});
	//扫码
	var userPhone=null;
	function x1(){
		wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: function (res) {
					var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果(二维码封装的取件码/手机号)
					//result为qRCodeContent="express_"+code;或者RCodeContent="userPhone_"+userPhone
					var code=null;

					$("#expPickUserId").val(result);
					/*
					if(result.indexOf("express_")==0){ //若result以express_开头
						//扫描到的是一个快递的取件码，按照取件码的方式进行查询
						code = result.substring(8);//从第8位开始截取 即获取取件码
						console.log("扫码取得的取件码是:"+code);
						$("#expPickUserId").val(code);//扫码获取到的取件码填充到页面的输入框中
					}else if (result.indexOf("userPhone_")==0) {
						//扫描到的是用户手机号，通过手机号获取其所有未取件码并在页面展示
						userPhone=result.substring(10);//从第10位开始截取 即获取用户手机号
						console.log("扫码取得的取件码是:"+code);
						getExpress();
					}*/

				}
			});
	}
	//根据手机查询未取件
	function getExpress(){
		var windowId=layer.load();
		$.getJSON("/wx/userExpressList.do",{userPhone:userPhone},function (data) {//ajax去后台通过手机查询快递
			if (data.status==-1){
				layer.msg("用户无快递",function (){});
			}else {
				var list=data.data;//获取消息对象的data属性数据
				//拼接div,动态生成快递信息条目
				for (var i=0;i<list.length;i++){
					var item="<div class=\"expInfoCont status1\">\n" +
							"\t\t\t<table>\n" +
							"\t\t\t\t<tr>\n" +
							"\t\t\t\t\t<td>快递公司：</td><td>"+list[i].company+"</td>\n" +
							"\t\t\t\t</tr>\n" +
							"\t\t\t\t<tr>\n" +
							"\t\t\t\t\t<td>快递单号：</td><td>"+list[i].number+"</td>\n" +
							"\t\t\t\t</tr>\n" +
							"\t\t\t\t<tr>\n" +
							"\t\t\t\t\t<td>到件时间：</td><td>"+list[i].inTime+"</td>\n" +
							"\t\t\t\t</tr>\n" +
							"\t\t\t\t<tr>\n" +
							"\t\t\t\t\t<td>取件码：</td><td>"+list[i].code+"</td>\n" +
							"\t\t\t\t</tr>\n" +
							"\t\t\t</table>\n" +
							"\t\t\t<div class=\"btns\">\n" +
							"\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus('"+list[i].code+"',0)\">确认收货</button>\n" + //点击执行该方法，传递取件码，修改快递状态等字段
							"\t\t\t</div>\n" +
							"\t\t</div>";
					//向ip=expUserInfoCont的div追加快递
					$("#expUserInfoCont").append($(item));
				}
				layer.close(windowId);
			}
		})
	}


	//根据取件码，实现确认收货功能
		// 在快递列表中修改指定快递的status为1、取件码为Null,并填充出库时间，
	function updateStatus(code,type){
		var windowId=layer.load();

			$.getJSON("/wx/updateStatus.do",{code:code},function(data){
				layer.msg(data.result);
				//点击确认收货后，需要更新快递列表
				$("#expUserInfoCont").html("");//先清空扫码查询到快递列表
				layer.close(windowId);
				if (type==0) getExpress();//根据扫码获取的手机号重新获取快递列表
				//若type==1表示通过快递二维码取件，只有一个快递，点击收货后列表就没有快递，不要重新刷新一遍
			})

	}

	//通过取件码查询快递
	function find(){
		var windowId=layer.load();
		var code=$("#expPickUserId").val();//获取输入框中取件码
		$.getJSON("/wx/findExpressByCode.do",{code:code},function (data){
			layer.close(windowId);
			layer.msg(data.result);
			if (data.status==0){ //查询成功
				$("#expUserInfoCont").html("");//先清空快递列表
				var express=data.data;
				var item="<div class=\"expInfoCont status1\">\n" +
						"\t\t\t<table>\n" +
						"\t\t\t\t<tr>\n" +
						"\t\t\t\t\t<td>快递公司：</td><td>"+express.company+"</td>\n" +
						"\t\t\t\t</tr>\n" +
						"\t\t\t\t<tr>\n" +
						"\t\t\t\t\t<td>快递单号：</td><td>"+express.number+"</td>\n" +
						"\t\t\t\t</tr>\n" +
						"\t\t\t\t<tr>\n" +
						"\t\t\t\t\t<td>到件时间：</td><td>"+express.inTime+"</td>\n" +
						"\t\t\t\t</tr>\n" +
						"\t\t\t\t<tr>\n" +
						"\t\t\t\t\t<td>取件码：</td><td>"+express.code+"</td>\n" +
						"\t\t\t\t</tr>\n" +
						"\t\t\t</table>\n" +
						"\t\t\t<div class=\"btns\">\n" +
						"\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus('"+express.code+"',1)\">确认收货</button>\n" + //点击执行该方法，传递取件码，修改快递状态等字段
						"\t\t\t</div>\n" +
						"\t\t</div>";
				//向ip=expUserInfoCont的div追加快递
				$("#expUserInfoCont").append($(item));

			}
		})
	}
	</script>
	<style type="text/css">
		.expPickCont{
			padding-bottom: 20px;
		}
		.expPickCont .expPickIcon{
			width: 15%;
			margin: 0 auto;
			text-align: center;
		}
		.expPickCont .expPicTitle{
			text-align: center;
			font-weight: bold;
		}

		.searchInfoBtn{
			width: 90%;
			margin: 0 auto;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			background: #1f72ff;
			color: #fff;
			font-weight: bolder;
		}

		.expUserInfoCont{
			width: 90%;
			margin: 20px auto 20px; 
			font-size: 14px;
		}
		
		.expUserInfoNull{
			width: 100%;
			line-height: 150px;
			text-align: center;
			color: #888888;
			display: none;
		}
		.expInfoCont{
			width:100%;
			box-sizing: border-box;
			background-color:#fff;
			border-radius: 10px;
			padding: 30px;
		}
		.expInfoCont td:nth-of-type(1){
			text-align: right;
			height:2em;
			line-height: 2em;
		}
		.expInfoCont>.btns{
			border-top: 1px dashed #666;
			padding-top: 20px;
			text-align: right;
			margin-top: 10px;
		}
		.btn-success{
			padding: 5px 15px;
			color: #fff;
			background: #2F9925;
			border: 1px solid #fff;
			border-radius: 5px;
		}
		.status2{
			position: relative;
		}
		.status2_bg{
			position: absolute;
			left:0px;
			top:0px;
			bottom:0px;
			right:0px;
		}
		.status2_bg>img{
			width:30%;
			margin: 0 auto;
			margin-top: 50px;
			opacity: 0.5;
			
		}
		
		
		
		.status1{
			display: auto;
		}
		.status2{
			display: none;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="headerNav">
		<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
		<div class="headerNavCont">
			<a href="../index.html">快递首页</a>
			<a href="../userhome.html">个人中心</a>
			<a href="../delivery.html">送货上门</a>
			<a href="../lazyboard.html">懒人排行</a>
			<a href="../expassistant.html">快递助手</a>
		</div>
	</div>

	<div class="expPickCont">
		<div class="expPickIcon">
			<img src="images/pickexpicon.png" width="100%">
		</div>
		<p class="expPicTitle">确认取货</p>

		<div class="expPickInput">
			<form>
				<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
				<input id="wxCode" type="hidden" value="${wxCode}" />
				<div class="userInputCont">
					<div class="inputTypeCont">
						<div class="inputTitle">取货码</div>
						<input type="text" id="expPickUserId" class="commonInputFunc" name="username" placeholder="请输入取货码">
						<div class="commonFuncBtnScan" id="scanQRCodeBtn"></div>
					</div>
				</div>
			</form>
			<div class="searchInfoBtn" id="searchInfoBtn" onclick="find()">查找信息</div>
		</div>
	</div>

	<div class="expUserInfoCont" id="expUserInfoCont"> <!--脚本中向该div中填充未取件的快递-->
		<!--
		<div class="expUserInfoNull">
			暂无查到相关信息
		</div>
		<div class="expInfoCont status1">
			<table>
				<tr>
					<td>快递公司：</td><td>顺丰快递</td>
				</tr>
				<tr>
					<td>快递单号：</td><td>123456789456789</td>
				</tr>
				<tr>
					<td>到件时间：</td><td>2019-10-14 22:00</td>
				</tr>
				<tr>
					<td>取件码：</td><td>666666</td>
				</tr>
			</table>
			<div class="btns">
				<button class="btn-success">确认收货</button>
			</div>
		</div>
		-->

		<!--
		<div class="expInfoCont status2">

			<table>
				<tr>
					<td>快递公司：</td><td>顺丰快递</td>
				</tr>
				<tr>
					<td>快递单号：</td><td>123456789456789</td>
				</tr>
				<tr>
					<td>到件时间：</td><td>2019-10-14 22:00</td>
				</tr>
				<tr>
					<td>取件时间：</td><td>2019-10-15 12:00</td>
				</tr>
			</table>
			<div class="status2_bg"><img src="images/status2_bg.png"></div>

		</div>
		-->
	</div>

</div>

</body>
</html>